<template>
	<!-- 全真模拟-在线组卷-手动组卷【选择章节】 -->
	<view>
		<u-navbar back-icon-color="#fff" :border-bottom="false" title="选择章节" title-color="#FFFFFF">
			<template v-slot:right>
				<text class="confirm" @click="confirm">确定</text>
			</template>
		</u-navbar>
			<u-collapse class="chaperCon">
				<u-collapse-item :open="subId==sub.subid" v-for="(sub, index) in list" :key="'sub-' + sub.subid">
					<template slot="title">
						<u-checkbox  @change="onSelectAll($event, sub)" v-model="sub.checked" label-disabled :name="sub.subid"><text class="text-ellipsis">{{ sub.subname }}</text></u-checkbox>
					  <my-icon name="xxzj-down" style="color: #CCC;font-size:20upx; transform: scale(.7);"></my-icon>
					</template>
					<view class="chaperList">
						<view v-for="(chapter, index) in sub.chapterList" :key="chapter.chapterid" class="chapter">
							<u-checkbox  @change="onSelect($event, sub, index)" v-model="chapter.checked" :key="chapter.chapterid" :name="sub.subid + '-' + chapter.chapterid">
								<text class="text-ellipsis">{{ chapter.chaptername }}</text>
							</u-checkbox>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			subId: null,
	   	list: [],
			choseNum:0
		};
	},
	onLoad(option) {
		this.subId = option.subId;
		if (uni.getStorageSync('chapterInfo')) {
			this.list = uni.getStorageSync('chapterInfo');
		} else {
			this.list= JSON.parse(option.list);
		}
	},
	computed: {
		isSelectedTwo() {
			let count = 0;
			for (var i = 0; i < this.list.length; i++) {
				const sub = this.list[i];
				if (sub.checked === true) {
					count++;
					continue;
				}
				for (var j = 0; j < sub.chapterList.length; j++) {
					if (sub.chapterList[j].checked === true) {
						count++;
						break;
					}
				}
			}
			this.choseNum=count
			if (count > 2) {
				uni.showToast({
					icon: 'none',
					title: '最多只能选择两个科目的章节！'
				});
				return true;
			} else return false;
		}
	},
	methods: {
		confirm() {
			if(this.choseNum==0){
				uni.showToast({
					icon: 'none',
					title: '请选择章节！'
				});
				return
			}
			uni.setStorage({
				data: this.list,
				key: 'chapterInfo',
				success() {
					uni.navigateBack();
				}
			});
		},
		onSelect({ name: ids, value }, sub, index) {
			if (this.isSelectedTwo) {
				this.$set(sub.chapterList[index], 'checked', false);
				return;
			}
			const [subId, chapterId] = ids.split('-');
			if (!value) this.$set(sub, 'checked', false);
			const unChecked = sub.chapterList.filter(item => !item.checked);
			if (unChecked.length === 0) this.$set(sub, 'checked', true);
		},
		onSelectAll({ name: checkedSubId, value }, sub) {
			if (this.isSelectedTwo) {
				this.$set(sub, 'checked', false);
				return;
			}
			for (var j = 0; j < sub.chapterList.length; j++) {
				this.$set(sub.chapterList[j], 'checked', value);
			}
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style scoped lang="scss">
.text-ellipsis {
	display: block;
	max-width: 600upx;
	margin-left: 28upx;
}
.chapter {
	font-size: 30upx;
	font-weight: 400;
	color: #636874;
}
.chapter + .chapter {
	border-top: 1px solid #ebebeb;
}
.chaperList{
	margin-right: 30upx;
}
.u-arrow-down-icon{
	margin-right: 0!important;
}
.headactive{
	 .iconfont{
	  	transform: rotate(180deg) scale(.7)!important
	 }
}
</style>
